@import "../base/variables.less";
@import "../mixins/border-radius.less";
.input-group {
  position: relative; // For dropdowns
  display: table;
  border-collapse: separate;

  // Undo padding and float of grid classes
  &[class*="col-"] {
    float: none;
    padding-left: 0;
    padding-right: 0;
  }

  .form-control {
    position: relative;
    z-index: 2;
    float: left;

    width: 100%;
    margin-bottom: 0;
  }
}

.form-control {
  display: block;
  width: 100%;
  height: @inputH; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
  padding: @inputP-v @inputP-h;
  font-size: 14px;
  line-height: @inputH;
  color: @lightBlack;
  background-color: #FFF;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 1px solid @greycc;
  border-radius: @baseBorderRadius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
  // .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  margin-top: 10px;
  // .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");

  // Customize the `:focus` state to imitate native WebKit styles.
  // .form-control-focus();
  &:focus {
    border-color: @green;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(44,198,187,.6);
    // .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");
  }

  // Placeholder
  // .placeholder();

  // Disabled and read-only inputs
  //
  // HTML5 says that controls under a fieldset > legend:first-child won't be
  // disabled if the fieldset is disabled. Due to implementation difficulty, we
  // don't honor that edge case; we style them as disabled anyway.
  &[disabled],
  fieldset[disabled] & {
    background-color: @lightGrey;
    opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
  }

  &[readonly] {
    background-color: @whiteGrey;
    opacity: 1;
  }

  &[disabled],
  fieldset[disabled] & {
    cursor: default;
  }

  // Reset height for `textarea`s
  textarea& {
    height: auto;
  }

  &.has-delete {
    position: relative;
    &::after {
      content: 'X';
      position: absolute;
    }
  }
}

.form-inline {

  // Kick in the inline
  @media (min-width: @screen-sm-min) {
    // Inline-block all the things for "inline"
    .form-group {
      display: inline-block;
      vertical-align: middle;
    }

    // In navbar-form, allow folks to *not* use `.form-group`
    .form-control {
      display: inline-block;
      width: auto; // Prevent labels from stacking above inputs in `.form-group`
      vertical-align: middle;
    }

    // Make static controls behave like regular ones
    .form-control-static {
      display: inline-block;
    }

    .input-group {
      display: inline-table;
      vertical-align: middle;

      .input-group-addon,
      .input-group-btn,
      .form-control {
        width: auto;
      }
    }

    // Input groups need that 100% width though
    .input-group > .form-control {
      width: 100%;
    }

    .control-label {
      margin-bottom: 0;
      vertical-align: middle;
    }

    // Remove default margin on radios/checkboxes that were used for stacking, and
    // then undo the floating of radios and checkboxes to match.
    .radio,
    .checkbox {
      display: inline-block;
      margin-top: 0;
      margin-bottom: 0;
      vertical-align: middle;

      label {
        padding-left: 0;
      }
    }
    .radio input[type="radio"],
    .checkbox input[type="checkbox"] {
      position: relative;
      margin-left: 0;
    }

    // Re-override the feedback icon.
    .has-feedback .form-control-feedback {
      top: 0;
    }
  }
}

.input-group-addon,
.input-group-btn,
.input-group .form-control {
  display: table-cell;

  &:not(:first-child):not(:last-child) {
    border-radius: 0;
  }
}
// Addon and addon wrapper for buttons
.input-group-addon,
.input-group-btn {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle; // Match the inputs
}

// Text input groups
// -------------------------
.input-group-addon {
  padding: @inputP-v @inputP-h;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  color: @lightBlack;
  text-align: center;
  background-color: @whiteGrey;
  border: 1px solid @greycc;
  border-radius: @baseBorderRadius;

  // Nuke default margins from checkboxes and radios to vertically center within.
  input[type="radio"],
  input[type="checkbox"] {
    margin-top: 0;
  }
}

// Reset rounded corners
.input-group .form-control:first-child,
.input-group-addon:first-child,
.input-group-btn:first-child > .btn,
.input-group-btn:first-child > .btn-group > .btn,
.input-group-btn:first-child > .dropdown-toggle,
.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
  .border-right-radius(0);
}
.input-group-addon:first-child {
  border-right: 0;
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
  .border-left-radius(0);
}
.input-group-addon:last-child {
  border-left: 0;
}

.form-group{
  &.flex-group {
    margin-bottom: 16px;
    width: 100%;
    .span-control {
      word-break: break-all;
    }
    .flex1 {
      -webkit-flex: 1;
      flex: 1;
    }
    .flex2 {
      -webkit-flex: 2;
      flex: 2;
    }
    .flex3 {
      -webkit-flex: 3;
      flex: 3;
    }
    .flex4 {
      -webkit-flex: 4;
      flex: 4;
    }
    .flex5 {
      -webkit-flex: 5;
      flex: 5;
    }
    .flex6 {
      -webkit-flex: 6;
      flex: 6;
    }
    .flex7 {
      -webkit-flex: 7;
      flex: 7;
    }
    .flex8 {
      -webkit-flex: 8;
      flex: 8;
    }
    .flex9 {
      -webkit-flex: 9;
      flex: 9;
    }
    .flex10 {
      -webkit-flex: 10;
      flex: 10;
    }
  }
}

.el-input__inner {
  //.form-control;
}
.el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-textarea__inner
{
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 73, 73, 0.6);
}

.form-group .el-input__icon {
  width: 30px;
  cursor: pointer;
}

.form-group .el-input__icon + .el-input__inner {
  padding-right: 30px;
}
